import React, { useState } from 'react';

import {
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    Text,
    Linking,
    TextInput,
    LayoutAnimation,
    ToastAndroid,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { formatPhone, replaceBlank } from '../../utils/StringUtlis';
import Toast from '../../components/widget/Toast';
/* 图片最后导入 */
import icon_main_logo from '../../assets/icon_main_logo.png';
import icon_unselected from '../../assets/icon_unselected.png';
import icon_selected from '../../assets/icon_selected.png';
import icon_right from '../../assets/icon_right.png';
import icon_wx_small from '../../assets/icon_wx_small.png';
import icon_triangle from '../../assets/icon_triangle.png';
import icon_eye_close from '../../assets/icon_eye_close.png';
import icon_eye_open from '../../assets/icon_eye_open.png';
import icon_exchange from '../../assets/icon_exchange.png';
import icon_wx from '../../assets/icon_wx.png';
import icon_qq from '../../assets/icon_qq.webp';
import icon_close_modal from '../../assets/icon_close_modal.png';
import UserStore from '../../stores/UserStore';


export default () => {
    const [loginType, setLoginType] = useState<'quick' | 'input'>('quick');
    const [check, setCheck] = useState<boolean>(false);
    const [eyeOpen, setEyeOpen] = useState<boolean>(false);
    const navigation = useNavigation<StackNavigationProp<any>>();
    const [phone, setPhone] = useState<string>('');
    const [pwd, setPwd] = useState<string>('');
    const getInfoLogin = async () => {
        const canLogin = phone?.length === 13 && pwd?.length === 6;
        if (!canLogin || !check) {
            return;
        }
        UserStore.requestLogin(replaceBlank(phone), pwd, (success: boolean) => {
            if (success) {
                navigation.replace('MainTab')

            } else {
                Toast.show('账号或密码错误')
            }
        })
    };
    const renderQuickLogin = () => {
        const QuickStyles = StyleSheet.create({
            root: {
                width: '100%',
                height: '100%',
                flexDirection: 'column-reverse',
                alignItems: 'center',
                paddingHorizontal: 46,
            },

            otherLoginButton: {
                flexDirection: 'row',
                alignItems: 'center',
                paddingHorizontal: 10,
                paddingVertical: 20,
                marginBottom: 100,
            },
            otherLoginTxt: {
                fontSize: 16,
            },
            icon_onPressRight: {
                width: 16,
                height: 16,
                resizeMode: 'contain',
                marginLeft: 6,
                marginTop: 2,
            },
            wxLoginButton: {
                width: '100%',
                height: 60,
                backgroundColor: '#05c160',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 28,
            },
            wxLoginSmall: {
                width: 40,
                height: 40,
                resizeMode: 'contain',
                marginTop: 4,
                marginRight: 4,
            },
            wxLoginTxt: {
                color: '#fff',
                fontSize: 18,
            },
            onKetLoginButton: {
                width: '100%',
                height: 60,
                backgroundColor: '#ff2442',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 28,
                marginBottom: 20,
            },
            onKeyLoginTxt: {
                color: '#fff',
                fontSize: 18,
            },
            logo_main: {
                width: 190,
                height: 100,
                resizeMode: 'contain',
                marginBottom: 200,
            },
        });
        return (
            <View style={QuickStyles.root}>
                <View style={styles.protocolLayout}>
                    <TouchableOpacity
                        onPress={() => {
                            setCheck(!check);
                        }}>
                        <Image
                            style={styles.radioButton}
                            source={check ? icon_selected : icon_unselected}
                        />
                    </TouchableOpacity>
                    <Text style={styles.labelText}>我已阅读并同意</Text>
                    <TouchableOpacity
                        onPress={() => {
                            Linking.openURL('https://www.baidu.com');
                        }}>
                        <Text style={styles.protocolText}>《用户协议》《隐私政策》</Text>
                        {/* 《儿童/青少年个人信息保护规则》《中国移动认证服务条款》 */}
                    </TouchableOpacity>
                </View>
                <TouchableOpacity
                    style={QuickStyles.otherLoginButton}
                    onPress={() => {
                        LayoutAnimation.easeInEaseOut();
                        setLoginType('input');
                    }}>
                    <Text style={QuickStyles.otherLoginTxt}>其他登录方式</Text>
                    <Image style={QuickStyles.icon_onPressRight} source={icon_right} />
                </TouchableOpacity>

                <TouchableOpacity style={QuickStyles.wxLoginButton} activeOpacity={0.7}>
                    <Image style={QuickStyles.wxLoginSmall} source={icon_wx_small} />
                    <Text style={QuickStyles.wxLoginTxt}>微信登录</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={QuickStyles.onKetLoginButton}
                    activeOpacity={0.7}>
                    <Text style={QuickStyles.onKeyLoginTxt}>一键登录</Text>
                </TouchableOpacity>

                <Image style={QuickStyles.logo_main} source={icon_main_logo} />
            </View>
        );
    };
    const renderInputLogin = () => {
        const InputStyles = StyleSheet.create({
            root: {
                width: '100%',
                height: '100%',
                backgroundColor: 'white',
                flexDirection: 'column',
                alignItems: 'center',
                paddingHorizontal: 46,
            },
            pwdLogin: {
                fontSize: 25,
                marginTop: 52,
                fontWeight: 'bold',
            },
            tip: {
                color: '#aaa',
                fontSize: 12,
                marginVertical: 10,
            },
            phoneLayout: {
                width: '100%',
                height: 60,
                flexDirection: 'row',
                borderBottomWidth: 1,
                borderBottomColor: '#bbb',
                alignItems: 'center',
            },
            phone86: {
                fontSize: 24,
                color: '#959595',
            },
            triangle: {
                width: 12,
                height: 6,
            },
            phoneInput: {
                flex: 1,
                height: 64,
                fontSize: 24,
                backgroundColor: 'transparent',
                textAlign: 'left',
                textAlignVertical: 'center',
                marginLeft: 16,
            },
            pwdLayout: {
                width: '100%',
                height: 60,
                flexDirection: 'row',
                borderBottomWidth: 1,
                borderBottomColor: '#bbb',
                alignItems: 'center',
            },
            pwdInput: {
                marginLeft: 0,
                marginRight: 16,
            },
            iconEye: {
                width: 30,
                height: 30,
                resizeMode: 'contain',
            },
            changeLayout: {
                width: '100%',
                alignItems: 'center',
                marginTop: 10,
                flexDirection: 'row',
            },
            exchangeIcon: {
                width: 18,
                height: 18,
                resizeMode: 'contain',
            },
            codeLoginTxt: {
                color: '#223a6f',
                fontSize: 14,
                flex: 1,
                marginLeft: 4,
            },
            forgetPwdTxt: {
                color: '#223a6f',
                fontSize: 14,
            },
            loginButton: {
                width: '100%',
                height: 56,
                backgroundColor: '#ff2442',
                borderRadius: 28,
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: 20,
            },
            loginButtonDisable: {
                width: '100%',
                height: 56,
                backgroundColor: '#ccc',
                borderRadius: 28,
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: 20,
            },
            loginTxt: {
                fontSize: 20,
                color: 'white',
            },
            wqLayout: {
                width: '100%',
                flexDirection: 'row',
                justifyContent: 'center',
                marginTop: 60,
            },
            wxIcon: {
                width: 50,
                height: 50,
                resizeMode: 'contain',
                marginRight: 50,
            },
            qqIcon: {
                width: 50,
                height: 50,
                resizeMode: 'contain',
                marginLeft: 50,
            },
            closeButton: {
                position: 'absolute',
                left: 36,
                top: 28,
            },
            closeIcon: {
                width: 28,
                height: 28,
            },
        });
        const canLogin = phone?.length === 13 && pwd?.length === 6;
        return (
            <View style={InputStyles.root}>
                <Text style={InputStyles.pwdLogin}>密码登录</Text>
                <Text style={InputStyles.tip}>未注册的手机号登录成功后将自动注册</Text>
                <View style={InputStyles.phoneLayout}>
                    <Text style={InputStyles.phone86}>+86</Text>
                    <Image style={InputStyles.triangle} source={icon_triangle} />
                    <TextInput
                        keyboardType="number-pad"
                        maxLength={13}
                        value={phone}
                        onChangeText={(text: string) => {
                            setPhone(formatPhone(text));
                        }}
                        style={InputStyles.phoneInput}
                        placeholderTextColor="#cfcfcf"
                        placeholder="请输入手机号码"
                    />
                </View>
                <View style={InputStyles.pwdLayout}>
                    <TextInput
                        value={pwd}
                        onChangeText={(text: string) => {
                            setPwd(text);
                        }}
                        maxLength={6}
                        keyboardType="number-pad"
                        secureTextEntry={!eyeOpen}
                        style={[InputStyles.phoneInput, InputStyles.pwdInput]}
                        placeholderTextColor="#cfcfcf"
                        placeholder="输入密码"
                    />
                    <TouchableOpacity
                        onPress={() => {
                            setEyeOpen(!eyeOpen);
                        }}>
                        <Image
                            style={InputStyles.iconEye}
                            source={eyeOpen ? icon_eye_open : icon_eye_close}
                        />
                    </TouchableOpacity>
                </View>
                <View style={InputStyles.changeLayout}>
                    <Image style={InputStyles.exchangeIcon} source={icon_exchange} />
                    <Text style={InputStyles.codeLoginTxt}>验证码登录</Text>
                    <Text style={InputStyles.forgetPwdTxt}>忘记密码?</Text>
                </View>
                <TouchableOpacity
                    style={
                        canLogin ? InputStyles.loginButton : InputStyles.loginButtonDisable
                    }
                    onPress={() => {
                        getInfoLogin();
                    }}
                    activeOpacity={canLogin ? 0.7 : 1}>
                    <Text style={InputStyles.loginTxt}>登录</Text>
                </TouchableOpacity>
                <View style={styles.protocolLayout}>
                    <TouchableOpacity
                        onPress={() => {
                            setCheck(!check);
                        }}>
                        <Image
                            style={styles.radioButton}
                            source={check ? icon_selected : icon_unselected}
                        />
                    </TouchableOpacity>
                    <Text style={styles.labelText}>我已阅读并同意</Text>
                    <TouchableOpacity
                        onPress={() => {
                            Linking.openURL('https://www.baidu.com');
                        }}>
                        <Text style={styles.protocolText}>《用户协议》《隐私政策》</Text>
                        {/* 《儿童/青少年个人信息保护规则》《中国移动认证服务条款》 */}
                    </TouchableOpacity>
                </View>
                <View style={InputStyles.wqLayout}>
                    <Image style={InputStyles.wxIcon} source={icon_wx} />
                    <Image style={InputStyles.qqIcon} source={icon_qq} />
                </View>
                <TouchableOpacity
                    style={InputStyles.closeButton}
                    onPress={() => {
                        LayoutAnimation.easeInEaseOut();
                        setLoginType('quick');
                    }}>
                    <Image style={InputStyles.closeIcon} source={icon_close_modal} />
                </TouchableOpacity>
            </View>
        );
    };
    return (
        <View style={styles.root}>
            {loginType === 'quick' ? renderQuickLogin() : renderInputLogin()}
        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
        flexDirection: 'column',
        alignItems: 'center',
    },
    protocolLayout: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 10,
    },
    radioButton: {
        width: 20,
        height: 20,
    },
    labelText: {
        color: '#999',
        marginLeft: 6,
        fontSize: 12,
    },
    protocolText: {
        color: '#203e68',
        fontSize: 12,
    },
});
